<template>
  <a-modal
    v-model:visible="formVisible"
    :title="getTitle"
    @ok="handleModalOK"
    @cancel="handleModalCancel"
    :confirm-loading="confirmLoading"
  >
    <a-form :model="user" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-item v-bind="validateInfos.username" label="账号">
        <a-input v-model:value="user.username" />
      </a-form-item>
      <a-form-item v-bind="validateInfos.password" label="密码">
        <a-input v-model:value="user.password" />
      </a-form-item>
      <a-form-item v-bind="validateInfos.realName" label="姓名">
        <a-input v-model:value="user.realName" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model:value="user.mobile" />
      </a-form-item>
      <a-form-item v-bind="validateInfos.deptId" label="部门">
        <a-tree-select
          v-model:value="user.deptId"
          showSearch
          treeNodeFilterProp="name"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="deptSelectData"
          :field-names="{
            children: 'children',
            label: 'name',
            value: 'id',
          }"
        >
        </a-tree-select>
      </a-form-item>

      <a-form-item label="角色" v-bind="validateInfos.roleIdList">
        <a-select
          :field-names="{ label: 'name', value: 'id' }"
          v-model:value="user.roleIdList"
          mode="multiple"
          style="width: 100%"
          :options="roleSelectData"
        ></a-select>
      </a-form-item>
      <a-form-item label="岗位">
        <a-input v-model:value="user.jobId" />
      </a-form-item>

      <a-form-item label="状态" v-bind="validateInfos.status">
        <a-radio-group v-model:value="user.status">
          <a-radio :value="1">正常</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
export default {
  name: 'AccountModal',
};
</script>
<script setup lang="ts">
import { ref, computed, onMounted, watch, unref } from 'vue';
import { getDeptList, getRoleList, addAccount, updateAccount } from '/@/api/sys/system';
import { deepMerge } from '/@/utils/index';
import { Form, message } from 'ant-design-vue';
const useForm = Form.useForm;

const props = defineProps({
  visible: Boolean,
  data: Object,
});
const emit = defineEmits(['ok', 'update:visible']);
const formVisible = ref(false);

const rules = ref({
  username: [{ required: true, trigger: 'change', message: '请输入用户名' }],
  password: [{ required: true, trigger: 'change', message: '请输入密码' }],
  realName: [{ required: true, trigger: 'change', message: '请输入姓名' }],
  status: [{ required: true, trigger: 'change', message: '请选择状态' }],
  deptId: [{ required: true, trigger: 'change', message: '请选择部门' }],
  roleIdList: [{ required: true, trigger: 'change', message: '请选择角色' }],
});

const user = ref({
  uid: '',
  username: '',
  password: '',
  realName: '',
  mobile: '',
  status: 1,
  deptId: undefined,
  jobId: undefined,
  email: '',
  roleIdList: [],
});

const deptSelectData = ref([]);
const roleSelectData = ref([]);
const confirmLoading = ref<boolean>(false);

const { resetFields, validate, validateInfos } = useForm(user, rules);
const getTitle = computed(() => (user.value.uid === '' ? '新增账号' : '编辑账号'));

// watch(
//   () => props.modalData,
//   () => {
//     resetFields();
//     deepMerge(user.value, props.modalData);
//     if (props.modalData.roleList) {
//       user.value.roleIdList = [];
//       props.modalData.roleList.forEach((role) => {
//         user.value.roleIdList.push(role.id);
//       });
//     }
//   },
// );

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
    if (val) {
      resetFields();
      deepMerge(user.value, props.data);
      if (props.data.roleList) {
        user.value.roleIdList = [];
        props.data.roleList.forEach((role) => {
          user.value.roleIdList.push(role.id);
        });
      }
    }
  },
);

const fetchData = async () => {
  deptSelectData.value = await getDeptList();
  roleSelectData.value = await getRoleList();
};

const roleSelectOptions = () => {};

onMounted(() => {
  fetchData();
});
const handleModalCancel = () => {
  formVisible.value = false;
};
const handleModalOK = async () => {
  try {
    confirmLoading.value = true;
    await validate();
    if (user.value.uid) {
      await updateAccount(unref(user));
    } else {
      await addAccount(unref(user));
    }
    message.success('保存成功');
    formVisible.value = false;
    emit('ok', true);
  } finally {
    confirmLoading.value = false;
  }
};
</script>